<style>
.map {
  height: 100%;
  overflow: hidden;
}

</style>
<div class="map" id="map"></div>

<script>
  const map = L.map('map', {
    center: [22.52, 113.94],
    zoom: 4
  })
  const gdLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: '1234'
  })
  gdLayer.addTo(map)
  let marker = null
  map.on('click', e => {
    const {lng, lat} = e.latlng
    const pos = [lng, lat].map(v => v.toFixed(4)).join(',')
    if(!marker) marker = L.marker(e.latlng).addTo(map)
    else marker.setLatLng(e.latlng)
    marker.bindPopup(pos, {autoClose: false}).openPopup();
  })
  map.on('popupclose', e => {
    marker.remove()
    marker = null
  })
</script>